<template>
	<div class="panel"> 
		<div class="article-time"><div>发表于：</div> <div>23小时前</div></div>
		<div class="article-title">从月薪3000到月薪10000，大家都用了多长的时间？</div>
		<div class="article-author">
			<div class="article-author-avatar">
				<img src="http://127.0.0.1:8080/src/public/img/avatar.jpg" alt="">
			</div>
			<div class="article-author-info">
				<div class="article-author-info-name">撩妹狂魔</div>
				<div class="article-author-info-motto">计算机领域老司机</div>
			</div>
		</div> 
		<div class="article-summary">
			我一直纳闷，为什么有些人，一起喝个茶，熏香也就罢了，竟然还要沐浴更衣！ 装个逼而尔，要不要装得这么逼真？ 直到大年初六，我才发现，喝茶之前沐浴更衣，也不全是为了装逼，真相竟然是！ 「01」 初六日，宜，会亲友，订盟；忌，嫁娶。 一个姓赖的基金负责人，我习惯性叫他老赖，一大早召唤我，说晚上带我去喝茶涨涨见识，当然顺带也让我帮他吹吹…
		</div>
		<div class="article-foot"> 
			<button class="button1" type="button"><svg viewBox="0 0 20 18" class="Icon VoteButton-likeIcon Icon--like" width="13" height="16" aria-hidden="true" style="height: 16px; width: 13px;margin-bottom:2px;margin-right: 7px;fill: currentColor;vertical-align: text-bottom;"><title></title><g><path d="M.718 7.024c-.718 0-.718.63-.718.63l.996 9.693c0 .703.718.65.718.65h1.45c.916 0 .847-.65.847-.65V7.793c-.09-.88-.853-.79-.846-.79l-2.446.02zm11.727-.05S13.2 5.396 13.6 2.89C13.765.03 11.55-.6 10.565.53c-1.014 1.232 0 2.056-4.45 5.83C5.336 6.965 5 8.01 5 8.997v6.998c-.016 1.104.49 2 1.99 2h7.586c2.097 0 2.86-1.416 2.86-1.416s2.178-5.402 2.346-5.91c1.047-3.516-1.95-3.704-1.95-3.704l-5.387.007z"></path></g></svg>
			53</button>

			<button class="button2" type="button" style="margin-left:18px;"><svg viewBox="0 0 18 18" class="Icon Icon--comment Icon--left" width="12" height="16" aria-hidden="true" style="height: 16px; width: 12px;margin-right: 6px;vertical-align: text-bottom; fill: #9fadc7;"><title></title><g><path d="M7.24 16.313c-.272-.047-.553.026-.77.2-1.106.813-2.406 1.324-3.77 1.482-.16.017-.313-.06-.394-.197-.082-.136-.077-.308.012-.44.528-.656.906-1.42 1.11-2.237.04-.222-.046-.45-.226-.588C1.212 13.052.027 10.73 0 8.25 0 3.7 4.03 0 9 0s9 3.7 9 8.25-4.373 9.108-10.76 8.063z"></path></g></svg>132 条评论</button>

			<button class="button2" type="button" style="margin-left:18px;"><svg viewBox="0 0 18 18" class="Icon Icon--comment Icon--left" width="12" height="16" aria-hidden="true" style="height: 16px; width: 12px;margin-right: 6px;vertical-align: text-bottom; fill: #9fadc7;"><title></title><g><path d="M.93 3.89C-.135 4.13-.343 5.56.614 6.098L5.89 9.005l8.168-4.776c.25-.128.477.197.273.388L7.05 10.66l.926 5.953c.18 1.084 1.593 1.376 2.182.456l9.644-15.243c.584-.892-.212-2.03-1.234-1.796L.93 3.89z"></path></g></svg>分享</button>

		</div>
	</div>
</template>

<script>

	export default {

	}

</script>

<style scoped> 
	.panel {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		border-bottom: 1px solid #f0f2f7; 
	}

	.article-time {
		height: 40px;
		line-height: 40px;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #8590a6;
	}

	.article-title { 
		font-size: 20px;
		width: 100%;
		cursor: pointer;
	}

	.article-author {
		height: 60px;
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.article-author-avatar {
		height: 46px;
		width: 43px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.article-author-avatar img {
		height: 35px;
		width: 35px;
	}

	.article-summary {
		word-break: break-word;
		letter-spacing:1px;
		line-height: 23px;
	}

	.article-foot {
		height: 60px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.article-author-info-name {
		font-weight: bold;
	}

	.article-author-info-motto {
		color: gray;
	}


</style>